<template>
        <div id="editor" class="md_css">
            <template v-if="mode=='edit'">
                <mavon-editor
                    :subfield = "subfield"
                    :codeStyle="code_style" :value="value"
                    name="mavoneditor" :scrollStyle="true" 
                    :ishljs="true" @change="change" :style="'height:'+ height +'px;'" :toolbars="toolbars"
                    :externalLink="externalLink"></mavon-editor>
                <!--<mavon-editor ref="md" @imgAdd="$imgAdd" style="min-height: 370px"/>-->
            </template>
            <template v-else>
                <span v-html="convertHtml(value)"></span>
            </template>
        </div>
    </template>
    <script>
// Local Registration
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  data() {
    return {
      subfield: true,
      code_style: "github",
      externalLink: {
        markdown_css: function() {
          // 这是你的markdown css文件路径
          return "/markdown/github-markdown.min.css";
        },
        font_css: function() {
          // 这是你的markdown css文件路径
          return "/markdown/css/index.css";
        },
        hljs_js: function() {
          // 这是你的hljs文件路径
          return "/highlightjs/highlight.min.js";
        },
        hljs_css: function(css) {
          // 这是你的代码高亮配色文件路径
          return "/highlightjs/styles/" + css + ".min.css";
        },
        hljs_lang: function(lang) {
          // 这是你的代码高亮语言解析路径
          return "/highlightjs/languages/" + lang + ".min.js";
        },
        katex_css: function() {
          // 这是你的katex配色方案路径路径
          return "/katex/katex.min.css";
        },
        katex_js: function() {
          // 这是你的katex.js路径
          return "/katex/katex.min.js";
        }
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: false, // 上一步
        redo: false, // 下一步
        trash: false, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
  name: "editor",
  props: ["value", "height", "mode"],
  // props: {
  //     value:{
  //         default:''
  //     },
  //     height:300
  // },
  components: {
    mavonEditor
  },
  methods: {
    change(value, render) {
      // render 为 markdown 解析后的结果
      // this.content = value;
      this.$emit("input", value);
    },
    convertHtml: function(ct) {
      return marked(ct);
    }
  },
  mounted: function() {
    hljs.initHighlightingOnLoad();
    marked.setOptions({
      highlight: code => hljs.highlightAuto(code).value
    });
    // marked.setOptions({
    //   renderer: new marked.Renderer(),
    //   gfm: true,
    //   tables: true,
    //   breaks: false,
    //   pedantic: false,
    //   sanitize: false,
    //   smartLists: true,
    //   smartypants: false,
    //   highlight: function(code, lang) {
    //     lang = "makefile";
    //     //["apache", "bash", "coffeescript", "cpp", "cs", "css", "diff", "http", "ini", "java", "javascript", "json", "makefile", "xml", "markdown", "nginx", "objectivec", "perl", "php", "python", "ruby", "shell", "sql"]
    //     if (lang && hljs.getLanguage(lang)) {
    //       return hljs.highlight(lang, code, true).value;
    //     } else {
    //       return hljs.highlightAuto(code).value;
    //     }
    //   }
    // });
  }
};
</script>

<style scoped>
#editor {
  margin: auto;
  width: 100%;
}
</style>